<template>
  <ConditionCombiner v-model="cellStr">
    <template #condition-success="scope">
      <el-color-picker v-model="scope.value.success" @change="scope['onUpdate:value']" />
    </template>
    <template #condition-fail="scope">
      <el-color-picker v-model="scope.value.fail" @change="scope['onUpdate:value']" />
    </template>
  </ConditionCombiner>

  <div
    :style="{
      backgroundColor: evaluate.evaluateCondition(
        cellStr,
        [obj, obj.name],
        ['row', 'val'],
      ) as string,
    }"
  >
    测试数据
  </div>
</template>

<script setup lang="ts">
import ConditionCombiner from '@/components/ConditionCombiner.vue'
import { evaluate } from '@/utils'
import { ref } from 'vue'

// 示例数据对象
const obj = { name: '张三', age: 18 }
const cellStr = ref('row.age > 14 ? "" : ""')
</script>

<style scoped></style>
